{template 'header'}
<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/css/sorder/mylist.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<header class="mui-bar mui-bar-nav" style="background: #72adf5;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
    <h1 class="mui-title" id="title" style="color: white;">我的订单</h1>
</header>
<body  id="body">
<!--侧滑菜单容器-->
        <div class="content" id="content">
            <div class="box" id="app">
                <!--选项卡部分-->
                <div class="tab">
                    <ul class="tabs clearfix">
                        <li v-for="(tab,index) in tabsName">
                            <a href="javascript:void(0)" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>
                        </li>
                        <li id="offCanvasBtn" href="#offCanvasSide">
                            <a href="javascript:void(0)"><span class="iconfont icon-caidan"></span></a>
                        </li>
                    </ul>
                    <!---tab的显示部分-->
                    <div class="cards">
                        <div class="tab-card" style="display: block;">
                            <ul>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png">
                                        <span>CGC美容院02号房</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                        <button class="common mui-btn mui-btn-primary mui-btn-outlined">评论</button>
                                    </div>
                                    <img src="../addons/mx_shop/resources/cgc/images/success_03.png">
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png" alt="" class="">
                                        <span>CGC美容院02号房</span>
                                        <span class="wait">待付款...</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">取消订单</button>
                                        <button class="pay mui-btn mui-btn-primary mui-btn-outlined">支付订单</button>
                                    </div>
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png">
                                        <span>CGC美容院02号房</span>
                                        <span class="cancel">已取消</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                    </div>
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png">
                                        <span>CGC美容院02号房</span>
                                        <span class="cancel">已取消</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                        <button class="pay mui-btn mui-btn-primary mui-btn-outlined">支付订单</button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-card">
                            <ul>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png" alt="" class="">
                                        <span>CGC美容院02号房</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                        <button class="common mui-btn mui-btn-primary mui-btn-outlined">评论</button>
                                    </div>
                                    <img src="../addons/mx_shop/resources/cgc/images/success_03.png">
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png" alt="" class="">
                                        <span>CGC美容院02号房</span>
                                        <span class="wait">待付款...</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">取消订单</button>
                                        <button class="pay mui-btn mui-btn-primary mui-btn-outlined">支付订单</button>
                                    </div>
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png">
                                        <span>CGC美容院02号房</span>
                                        <span class="cancel">已取消</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                    </div>
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png">
                                        <span>CGC美容院02号房</span>
                                        <span class="cancel">已取消</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                        <button class="pay mui-btn mui-btn-primary mui-btn-outlined">支付订单</button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-card">
                            <ul>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png" alt="" class="">
                                        <span>CGC美容院02号房</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                        <button class="common mui-btn mui-btn-primary mui-btn-outlined">评论</button>
                                    </div>
                                    <img src="../addons/mx_shop/resources/cgc/images/success_03.png">
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png" alt="" class="">
                                        <span>CGC美容院02号房</span>
                                        <span class="wait">待付款...</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">取消订单</button>
                                        <button class="pay mui-btn mui-btn-primary mui-btn-outlined">支付订单</button>
                                    </div>
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png">
                                        <span>CGC美容院02号房</span>
                                        <span class="cancel">已取消</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                    </div>
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png">
                                        <span>CGC美容院02号房</span>
                                        <span class="cancel">已取消</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                        <button class="pay mui-btn mui-btn-primary mui-btn-outlined">支付订单</button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-card">
                            <ul>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png" alt="" class="">
                                        <span>CGC美容院02号房</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                        <button class="common mui-btn mui-btn-primary mui-btn-outlined">评论</button>
                                    </div>
                                    <img src="../addons/mx_shop/resources/cgc/images/success_03.png">
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png" alt="" class="">
                                        <span>CGC美容院02号房</span>
                                        <span class="wait">待付款...</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">取消订单</button>
                                        <button class="pay mui-btn mui-btn-primary mui-btn-outlined">支付订单</button>
                                    </div>
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png">
                                        <span>CGC美容院02号房</span>
                                        <span class="cancel">已取消</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                    </div>
                                </li>
                                <li>
                                    <div class="top">
                                        <img src="../addons/mx_shop/resources/cgc/images/box.png">
                                        <span>CGC美容院02号房</span>
                                        <span class="cancel">已取消</span>
                                    </div>
                                    <div class="middle">
                                        <img src="../addons/mx_shop/resources/cgc/images/p1_03.png">
                                        <div class="info">
                                            <p class="product_name">威伐光-750W-000011008</p>
                                            <p class="list_number">订单号：CGC2017112310</p>
                                            <p class="price">
                                                <span>￥</span>
                                                90.00
                                                <span class="number">x1</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <div class="info">
                                            共 <span class="number">1</span>个设备
                                            <span>合计：</span>
                                            <span class="add">￥90.00</span>
                                        </div>
                                    </div>
                                    <!--按钮组部分-->
                                    <div class="button_ground">
                                        <button class="delete mui-btn mui-btn-primary mui-btn-outlined">删除订单</button>
                                        <button class="pay mui-btn mui-btn-primary mui-btn-outlined">支付订单</button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
                </div>
        </div>
            <div class="footer">
                <nav class="mui-bar mui-bar-tab">
                    <a class="mui-tab-item mui-active" href="#tabbar">
                        <span class="iconfont icon-shouye1" style="display: block;"></span>
                        <span class="mui-tab-label" style="font-size: 0.2rem;">首页</span>
                    </a>
                    <a class="mui-tab-item" href="#tabbar-with-chat">
                        <span class="iconfont icon-xiangmu" style="display: block;"></span>
                        <span class="mui-tab-label" style="font-size: 0.2rem;">商城</span>
                    </a>
                    <a class="mui-tab-item" href="#tabbar-with-contact">
                        <span class="iconfont icon-liebiao1" style="display: block;"></span>
                        <span class="mui-tab-label" style="font-size: 0.2rem;">联营企业</span>
                    </a>
                    <a class="mui-tab-item" href="#tabbar-with-map">
                        <span class="iconfont icon-gerenzhongxin" style="display: block;"></span>
                        <span class="mui-tab-label" style="font-size: 0.2rem;">个人中心</span>
                    </a>
                </nav>
            </div>
</body>
<!--<script type="text/javascript" src="../addons/mx_shop/resources/cgc/js/sorder/mylist.js"></script>-->
<script>
    var app = new Vue({
        el: "#app",
        data: {
            tabsName: [{
                name: "全部",
                isActive: true
            }, {
                name: "待付款",
                isActive: false
            }, {
                name: "进行中",
                isActive: false
            },{
                name: "已完成",
                isActive: false
            }],
            active: false
        },
        methods: {
            //选项卡切换
            tabsSwitch: function(tabIndex) {
                var tabCardCollection = document.querySelectorAll(".tab-card"),
                    len = tabCardCollection.length;
                for(var i = 0; i < len; i++) {
                    tabCardCollection[i].style.display = "none";
                    this.tabsName[i].isActive = false;
                }
                this.tabsName[tabIndex].isActive = true;
                tabCardCollection[tabIndex].style.display = "block";
            }
        }
    })
</script>
</html>
